React experimental_SuspenseList Manager: Suspense-Koordination meistern

            
import React, { Suspense } from 'react';

// Eine Komponente, die aussetzt, bis die Daten abgerufen sind
function MyComponent() {
  const data = useResource(fetchData()); // Hypothetischer useResource-Hook
  return 
Data: {data}
;
}

function App() {
  return (
    Loading...

In diesem Beispiel verwendet MyComponent einen hypothetischen useResource-Hook, um Daten abzurufen. Wenn die Daten noch nicht verfügbar sind, wird die Komponente ausgesetzt, und React zeigt das Fallback (

Einführung in experimental_SuspenseList

experimental_SuspenseList ist eine Komponente, mit der Sie die Anzeige mehrerer Suspense-Grenzen koordinieren können. Dies ist besonders nützlich, wenn Sie eine Liste von Elementen haben, von denen jedes von asynchronen Daten abhängt. Ohne SuspenseList könnten die Elemente in einer ungeordneten Reihenfolge erscheinen, sobald ihre Daten verfügbar werden. SuspenseList ermöglicht es Ihnen, die Reihenfolge zu steuern, in der die Elemente aufgedeckt werden, was die wahrgenommene Leistung und die Benutzererfahrung verbessert.

experimental_SuspenseList gilt als experimentell, daher müssen Sie es aus dem experimentellen Kanal importieren:

            
import { unstable_SuspenseList as SuspenseList } from 'react';

            

              
                Copy
              
            
          

revealOrder-Prop

Die wichtigste Prop für SuspenseList ist revealOrder. Diese Prop bestimmt die Reihenfolge, in der die Suspense-Grenzen innerhalb der SuspenseList aufgedeckt werden. Sie akzeptiert einen der folgenden Werte:

• forwards: Deckt die Suspense-Grenzen in der Reihenfolge auf, in der sie im Komponentenbaum erscheinen.
• backwards: Deckt die Suspense-Grenzen in umgekehrter Reihenfolge auf, in der sie im Komponentenbaum erscheinen.
• together: Deckt alle Suspense-Grenzen gleichzeitig auf, sobald alle Daten verfügbar sind.

Beispiel mit revealOrder="forwards"

Angenommen, Sie haben eine Liste von Produktkarten, und jede Karte muss Produktdetails abrufen. Die Verwendung von revealOrder="forwards" stellt sicher, dass die Karten von oben nach unten erscheinen, während ihre Daten geladen werden.

            
import React, { Suspense, unstable_SuspenseList as SuspenseList } from 'react';

function ProductCard({ productId }) {
  const product = useResource(fetchProduct(productId)); // Hypothetische fetchProduct-Funktion
  return (
    

      
{product.name}
      
{product.description}
    
  );
}

function App() {
  const productIds = [1, 2, 3, 4, 5];
  return (
    
      {productIds.map((productId) => (
        Loading product...